<template>
  <div>
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="(item) in imagesData"
                     :key="item.id">
        <img :src="item.url"
             alt="未能加载到图片">
      </mt-swipe-item>
    </mt-swipe>
    <!-- <img id="imgRol"
         src="./胡桃.png"
         alt=""> -->
  </div>
</template>




<script>
export default {
  data() {
    return {
      imagesData: []
    }
  },
  methods: {
    // getImagesData() {
    //   this.$http.post('/ajaxType=getImagesData').then((data) => {
    //     console.log(data)
    //   })
    // }
    async getImagesData() {
      const { data } = await this.$http.post('/ajaxType=getImagesData')
      //console.log(data)
      //console.log(data.data)//一张图片
      //console.log(data[0].data) //多张图片数组

      for (let i = 0; i < data.length; i++) {
        console.log(111)
        let bytes = new Uint8Array(data[i].data)
        let d = ''
        for (let i = 0; i < bytes.byteLength; i++) {
          d += String.fromCharCode(bytes[i])
        }
        // document.getElementById('imgRol').src = 'data:image/png;base64,' + window.btoa(d)
        this.imagesData.push({
          id: i,
          url: 'data:image/png;base64,' + window.btoa(d)
        })
      }
    }
  },
  created() {
    this.getImagesData()
  },
  base64Encode(input) {
    var rv
    rv = encodeURIComponent(input)
    rv = unescape(rv)
    rv = window.btoa(rv)
    return rv
  },
  toBase64Img(ImageBuffer) {
    let bytes = new Uint8Array(ImageBuffer.data)
    let d = ''
    let len = bytes.byteLength
    for (let i = 0; i < len; i++) {
      d += String.fromCharCode(bytes[i])
    }
  }
}
</script>




<style lang='scss' scoped>
.mint-swipe {
  height: 180px;

  .mint-swipe-item {
    img {
      width: 100%;
      height: 100%;
    }
    &:nth-child(1) {
      background: red;
    }
    &:nth-child(2) {
      background: pink;
    }
    &:nth-child(3) {
      background: hotpink;
    }
  }
}
</style>